<template>
  <div class="box">
    <div class="pic">
      <img src="../../assets/bbt.png" alt="" />
    </div>
    <main>
      <van-tabs v-model="active">
        <van-tab title="正在抢购" @click="qianggou">
          <div class="content" v-for="(item,index) in list" :key="index">
            <div class="img">
              <img :src="item.picture"/>
            </div>
            <div class="show">
              <div class="showname">{{item.name}}</div>
              <p>买一送一 | 聚划算套餐 | 进店必选</p>
              <div class="tuanjia">
                <div style="color:orange;">￥{{item.min_price}}</div>
                <span>{{item.promotion_info}}</span>
                <div class="anniu">
                  <button @click="Button(item)" class="ton">
                    {{(item.status == 0) ? '马上抢':'已抢'}}
                  </button>
                  <div>{{item.month_saled_content}}</div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="上新预告" @click="shangxin"
          >
          <div class="content" v-for="(item,index) in list" :key="index">
            <div class="img">
              <img :src="item.picture" width="100%"/>
            </div>
            <div class="show">
              <div class="showname">{{item.name}}</div>
            
              <p>买一送一</p>
              <div class="tuanjia">
                <div style="color:orange;">￥{{item.min_price}}</div>
                <span>{{item.promotion_info}}</span>
                <div class="anniu">
                  <button @click="Button(item)" class="ton">
                    {{(item.status == 0) ? '马上抢':'已抢'}}
                  </button>
                  <div>{{item.month_saled_content}}</div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </main>
    <div>
      <!-- <Tabbar></Tabbar> -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import "../../assets/bbt.png";
import { tuan_list } from "../../api/index2";

export default {
  name: "BBT",
  data() {
    return {
      status: 0,
      active: 2,
      list: [
        {text:"正在抢购"},{text:"上新预告"}
      /*   {
         pic: "http://5b0988e595225.cdn.sohucs.com/images/20190110/ff83a6ebbdda41a1aad6dc97d9c6873b.jpeg",
          name: "金百家烤鸭（苏家坨店）",
          star: "4.3",
          sale: "1632",
          desc: "起送￥20",
          distance: "起送距离￥3",
          yuan: "￥6",
          desc1: "47分钟",
          distance1: "3.9",
          price: 88880,
          status: 0, 
        }, */
      ],
    };
  },
  components: {
   Footer
  },
  methods: {
    qianggou(){
      tuan_list({status:0}).then((res)=>{
        console.log(res.data.list);
      })
    },
    shangxin(){
      tuan_list({status:1}).then((res)=>{
        // console.log(res.data.list);
        this.list = res.data.list.map(item => {
          return{...item,status:0}
        })
      })
    },
    Button(item){
      if(item.status == 0){
        item.status = 1;
      }
    }
  },

  mounted() {
    tuan_list({status:0}).then((res) => {
      console.log(res.data.status);
      this.list = res.data.list
      console.log(this.list);
    });
  },
};
</script>

<style scoped>
.pic {
  width: 100%;
  height: 200px;
}
.pic > img {
  width: 100%;
  height: 200px;
}
main .img{
  width: 120px;
  height: 120px;
}
main .img img{
  width: 100%;
  height: 100%;
}
main .show{
  margin-left: 5px;
  flex: 1;
}
main .show .tuanjia{
  display: flex;
  justify-content: space-around;
  width: 100%;
}
main .show .tuanjia .anniu{
  margin-bottom: 10px;
  
}
main .show .tuanjia .ton{
  background-color: rgb(255, 81, 0);
}
main .show .tuanjia .ton1{
  background-color: red;
}
main .content{
  display: flex;
  margin-bottom: 15px;
  border-radius: 10px;
}
main .content img{
  border-radius: 10px;
}
main .content .showname{
  margin-bottom: 10px;
}
</style>